<template>
  <div>
    <el-dropdown trigger="click" @command="handleSetLanguage" >
      <div class="size-icon--style">
        <svg-icon
            class-name="international-icon"
            icon-class="i18n-hui" />
      </div>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :disabled="language==='zh'" command="zh">
            中文
          </el-dropdown-item>
          <el-dropdown-item :disabled="language==='en'" command="en">
            English
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup>
import {computed} from "vue";
import useI18NStore from "@/store/modules/i18n";

const i18nStore = useI18NStore()

const { proxy } = getCurrentInstance();
const marginLang = ref('zh');
const language = computed(()=> {
  //return this.$store.getters.language
  return i18nStore.language
})

function handleSetLanguage(lang) {
  proxy.$i18n.locale = lang
  marginLang.value = lang
  i18nStore.setLanguage(lang)
  proxy.$message({
    message: proxy.$t('lang.message'),
    type: 'success'
  })
}
</script>
<style lang='scss' scoped>
.size-icon--style {
  font-size: 20px;
  line-height: 50px;
}
</style>
